<template>
  <div class="getLike-title">
    收到的赞
  </div>
  <div class="getLike-content" v-if="likeDataList[0]">
    <n-scrollbar style="max-height: 100%">
      <div class="getLike-item" v-for="(item, index) in likeDataList" :key="index">
        <n-avatar round :size="46" :src="'/api/' + item.avatar" style="cursor: pointer;" @click="goPerson(item.user_id)"/>
        <div class="item-right">
          <div><span class="item-username" @click="goPerson(item.user_id)">{{ item.username }}</span><span style="font-size: 13px;margin-left: 10px;">赞了我的文章</span></div>
          <div class="item-time">{{ item.like_time }}</div>
          <n-divider style="width: 100%;background-color: rgb(85, 85, 85);"/>
        </div>
        <div class="item-text" @click="goSpace(item.essay_data.space_id)">
          {{ item.essay_data.essay_content }}
        </div>
      </div>
    </n-scrollbar>
  </div>
  <div class="getLike-content" v-else>
    <n-empty description="还没有收到赞" style="height: 265px;justify-content: center;">
    </n-empty>
  </div>
  
</template>

<script setup lang='ts'>
import { ref, onMounted } from "vue"
import {getUserLike} from '../../api/message'
import { useRouter } from "vue-router"
const router = useRouter()

const likeDataList = ref<any>([])

const goPerson = (user_id:number) => {
  router.push('/person/' + user_id)
}

const goSpace = (space_id:number) => {
  router.push('/home/spaceHome/' + space_id)
}

onMounted(async() => {
  const user_id = Number(localStorage.getItem('user_id'))
  const like_data = await getUserLike(user_id)
  if(like_data.code === '200'){
    likeDataList.value = like_data.data
  }else{
    window.$message.error('获取数据失败')
  }
})

</script>

<style lang='scss' scoped>
.getLike-title {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background-color: var(--bs-content-background);
  padding-left: 20px;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px 0 rgba(85, 85, 85, 0.54);
}
.getLike-content{
  width: 100%;
  height: calc(100% - 80px);
  background-color: var(--bs-content-background);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 4px 0 rgba(85, 85, 85, 0.54);
  padding-bottom: 20px;
  box-sizing: border-box;
  .getLike-item{
    position: relative;
    width: 100%;
    height: 100px;
    padding: 24px 20px;
    box-sizing: border-box;
    display: flex;
    .item-right{
      margin-left: 15px;
      width: calc(100% - 61px);
      .item-time{
        font-size: 12px;
        color: #999;
        margin-top: 10px;
      }
      .item-username{
        cursor: pointer;
        font-weight: 700;
      }
      .item-username:hover{
        color: #63e2b7;
      }
    }
    .item-text{
      position: absolute;
      right: 20px;
      width: 60px;
      height: 60px;
      color: #999;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      font-size: 14px;
      line-height: 15px;
      cursor: pointer;
    }
  }
}
</style>